<template>
  <view class="chat-container">
    <!-- 聊天消息列表 -->
    <scroll-view 
      class="message-list" 
      scroll-y 
      :scroll-top="scrollTop" 
      scroll-with-animation
      @scrolltoupper="loadMoreMessages"
    >
      <!-- 加载更多提示 -->
      <view v-if="loading" class="loading-more">
        <u-loading-icon></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 消息列表 -->
      <view 
        v-for="(message, index) in messageList" 
        :key="message.id || index"
        class="message-item"
        :class="message.role === 'user' ? 'user-message' : 'ai-message'"
      >
        <!-- 用户消息 -->
        <view v-if="message.role === 'user'" class="user-msg">
          <view class="message-content user-content">
            <!-- 文本消息 -->
            <text v-if="message.mediaType === 'text'" class="message-text">{{ message.content }}</text>
            <!-- 图片消息 -->
            <image 
              v-else-if="message.mediaType === 'image'" 
              :src="message.mediaUrl" 
              class="message-image"
              mode="aspectFit"
              @click="previewImage(message.mediaUrl)"
            />
            <!-- 语音消息 -->
            <view v-else-if="message.mediaType === 'audio'" class="audio-message" @click="playAudio(message.mediaUrl)">
              <u-icon name="volume-fill" size="20" color="#007aff"></u-icon>
              <text class="audio-duration">{{ message.duration || '0:00' }}</text>
            </view>
          </view>
          <u-avatar class="user-avatar" :src="userInfo.avatar || '/static/default-avatar.png'" size="40"></u-avatar>
        </view>
        
        <!-- AI消息 -->
        <view v-else class="ai-msg">
          <u-avatar class="ai-avatar" src="/static/ai-avatar.png" size="40"></u-avatar>
          <view class="message-content ai-content">
            <text class="message-text">{{ message.content }}</text>
            <!-- AI回答置信度 -->
            <view v-if="message.confidence" class="confidence-bar">
              <text class="confidence-text">置信度: {{ Math.round(message.confidence * 100) }}%</text>
              <u-line-progress 
                :percent="message.confidence * 100" 
                :show-percent="false"
                height="4"
                active-color="#007aff"
              ></u-line-progress>
            </view>
            <!-- 相关内容推荐 -->
            <view v-if="message.relatedContent && message.relatedContent.length > 0" class="related-content">
              <text class="related-title">相关推荐:</text>
              <view 
                v-for="(item, idx) in message.relatedContent" 
                :key="idx"
                class="related-item"
                @click="viewRelatedContent(item)"
              >
                <text class="related-text">{{ item.title }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 消息时间 -->
        <view class="message-time">
          <text class="time-text">{{ formatTime(message.createdAt) }}</text>
        </view>
      </view>
      
      <!-- AI正在输入提示 -->
      <view v-if="aiTyping" class="ai-typing">
        <u-avatar class="ai-avatar" src="/static/ai-avatar.png" size="40"></u-avatar>
        <view class="typing-content">
          <u-loading-icon mode="flower" size="20"></u-loading-icon>
          <text class="typing-text">AI正在思考中...</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 快捷问题推荐 -->
    <view v-if="showSuggestions && suggestions.length > 0" class="suggestions">
      <scroll-view class="suggestion-scroll" scroll-x>
        <view class="suggestion-list">
          <view 
            v-for="(suggestion, index) in suggestions" 
            :key="index"
            class="suggestion-item"
            @click="sendSuggestion(suggestion)"
          >
            <text class="suggestion-text">{{ suggestion }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 输入区域 -->
    <view class="input-area">
      <!-- 多媒体按钮 -->
      <view class="media-buttons">
        <u-icon 
          name="camera" 
          size="24" 
          color="#666" 
          @click="chooseImage"
          class="media-btn"
        ></u-icon>
        <u-icon 
          name="mic" 
          size="24" 
          color="#666" 
          @click="startRecord"
          class="media-btn"
          :class="{ 'recording': isRecording }"
        ></u-icon>
      </view>
      
      <!-- 文本输入框 -->
      <view class="input-wrapper">
        <textarea 
          v-model="inputText"
          class="text-input"
          placeholder="请输入您的问题..."
          :auto-height="true"
          :maxlength="500"
          @input="onInput"
          @focus="onInputFocus"
          @blur="onInputBlur"
        ></textarea>
      </view>
      
      <!-- 发送按钮 -->
      <u-button 
        class="send-btn"
        type="primary"
        size="small"
        :disabled="!canSend"
        @click="sendMessage"
      >
        发送
      </u-button>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { request } from '@/utils/request';
import { AIService } from '@/services/ai';
import type { ConversationContext, AIResponse } from '@/services/ai';
import { getCurrentUser } from '@/config/supabase';

// 消息接口定义
interface Message {
  id?: string;
  role: 'user' | 'assistant';
  content: string;
  mediaType?: 'text' | 'image' | 'audio';
  mediaUrl?: string;
  duration?: string;
  confidence?: number;
  relatedContent?: Array<{
    title: string;
    url: string;
    type: string;
  }>;
  createdAt: Date;
}

// 用户信息接口
interface UserInfo {
  id: string;
  nickname: string;
  avatar?: string;
}

@Component
export default class ChatPage extends Vue {
  // 数据属性
  messageList: Message[] = [];
  inputText: string = '';
  sessionId: string = '';
  scrollTop: number = 0;
  loading: boolean = false;
  aiTyping: boolean = false;
  isRecording: boolean = false;
  showSuggestions: boolean = true;
  
  // 建议问题列表
  suggestions: string[] = [
    '宝宝几个月可以添加辅食？',
    '新生儿黄疸怎么办？',
    '宝宝发烧如何处理？',
    '如何培养宝宝的睡眠习惯？'
  ];
  
  // 用户信息
  userInfo: UserInfo = {
    id: '',
    nickname: '用户',
    avatar: ''
  };
  
  // 计算属性
  get canSend(): boolean {
    return this.inputText.trim().length > 0 && !this.aiTyping;
  }
  
  // 生命周期
  onLoad(options: any) {
    this.initChat();
    this.loadUserInfo();
    
    // 如果有传入的问题，直接发送
    if (options.question) {
      this.inputText = decodeURIComponent(options.question);
      this.sendMessage();
    }
  }
  
  onShow() {
    this.scrollToBottom();
  }
  
  // 方法
  
  /**
   * 初始化聊天
   */
  initChat() {
    // 生成会话ID
    this.sessionId = this.generateSessionId();
    
    // 添加欢迎消息
    const welcomeMessage: Message = {
      id: 'welcome',
      role: 'assistant',
      content: '您好！我是您的专属母婴AI助手，有什么问题可以随时问我哦～',
      mediaType: 'text',
      createdAt: new Date()
    };
    
    this.messageList.push(welcomeMessage);
  }
  
  /**
   * 加载用户信息
   */
  loadUserInfo() {
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      this.userInfo = userInfo;
    }
  }
  
  /**
   * 生成会话ID
   */
  generateSessionId(): string {
    return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
  }
  
  /**
   * 发送消息
   */
  async sendMessage() {
    if (!this.canSend) return;
    
    const userMessage: Message = {
      id: 'user_' + Date.now(),
      role: 'user',
      content: this.inputText.trim(),
      mediaType: 'text',
      createdAt: new Date()
    };
    
    // 添加用户消息到列表
    this.messageList.push(userMessage);
    
    // 清空输入框
    const messageContent = this.inputText.trim();
    this.inputText = '';
    this.showSuggestions = false;
    
    // 滚动到底部
    this.scrollToBottom();
    
    // 显示AI正在输入
    this.aiTyping = true;
    
    try {
      // 获取当前用户信息
      const currentUser = await getCurrentUser();
      const userId = currentUser?.id || this.userInfo.id;
      
      // 构建对话上下文
      const context: ConversationContext = {
        sessionId: this.sessionId,
        userId: userId,
        messages: this.messageList.map(msg => ({
          id: msg.id || '',
          session_id: this.sessionId,
          role: msg.role === 'user' ? 'user' : 'assistant',
          content: msg.content,
          media_type: msg.mediaType || 'text',
          media_url: msg.mediaUrl,
          created_at: msg.createdAt.toISOString()
        })),
        metadata: {
          platform: this.getPlatform(),
          userAgent: navigator.userAgent
        }
      };
      
      // 调用AI服务
      const aiResponse: AIResponse = await AIService.sendMessage(
        messageContent,
        context,
        'text'
      );
      
      // 添加AI回复
      const aiMessage: Message = {
        id: 'ai_' + Date.now(),
        role: 'assistant',
        content: aiResponse.content,
        mediaType: 'text',
        confidence: aiResponse.confidence,
        relatedContent: aiResponse.relatedContent?.map(item => ({
          title: item.title,
          url: item.id,
          type: item.type
        })),
        createdAt: new Date()
      };
      
      this.messageList.push(aiMessage);
      
      // 更新建议问题
      if (aiResponse.suggestions && aiResponse.suggestions.length > 0) {
        this.suggestions = aiResponse.suggestions;
        this.showSuggestions = true;
      } else {
        // 生成新的建议问题
        const newSuggestions = await AIService.generateSuggestions(context);
        this.suggestions = newSuggestions;
        this.showSuggestions = true;
      }
      
    } catch (error: unknown) {
      console.error('发送消息失败:', error);
      
      // 根据错误类型提供不同的错误信息
      let errorContent = '抱歉，我暂时无法回答您的问题，请稍后再试。';
      if (error instanceof Error) {
        if (error.message.includes('network')) {
          errorContent = '网络连接异常，请检查网络后重试。';
        } else if (error.message.includes('timeout')) {
          errorContent = '请求超时，请稍后再试。';
        }
      }
      
      // 添加错误提示消息
      const errorMessage: Message = {
        id: 'error_' + Date.now(),
        role: 'assistant',
        content: errorContent,
        mediaType: 'text',
        createdAt: new Date()
      };
      
      this.messageList.push(errorMessage);
    } finally {
      this.aiTyping = false;
      this.scrollToBottom();
    }
  }
  
  /**
   * 发送建议问题
   */
  sendSuggestion(suggestion: string) {
    this.inputText = suggestion;
    this.sendMessage();
  }
  
  /**
   * 选择图片
   */
  chooseImage() {
    uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['camera', 'album'],
      success: (res) => {
        const tempFilePath = res.tempFilePaths[0];
        this.uploadAndSendImage(tempFilePath);
      },
      fail: (error) => {
        console.error('选择图片失败:', error);
        uni.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    });
  }
  
  /**
   * 上传并发送图片
   */
  async uploadAndSendImage(filePath: string) {
    uni.showLoading({ title: '上传中...' });
    
    try {
      // 这里应该调用上传接口
      // const uploadResult = await uploadFile('/upload/image', filePath);
      
      // 模拟上传成功
      const imageUrl = filePath; // 实际应该是服务器返回的URL
      
      const imageMessage: Message = {
        id: 'image_' + Date.now(),
        role: 'user',
        content: '[图片]',
        mediaType: 'image',
        mediaUrl: imageUrl,
        createdAt: new Date()
      };
      
      this.messageList.push(imageMessage);
      this.scrollToBottom();
      
      // 发送图片分析请求
      this.analyzeImage(imageUrl);
      
    } catch (error: unknown) {
      console.error('上传图片失败:', error);
      const errorMessage = error instanceof Error ? error.message : '上传失败';
      uni.showToast({
        title: errorMessage,
        icon: 'none'
      });
    } finally {
      uni.hideLoading();
    }
  }
  
  /**
   * 分析图片
   */
  async analyzeImage(imageUrl: string) {
    this.aiTyping = true;
    
    try {
      const response = await request({
        url: '/chat/analyze-image',
        method: 'POST',
        data: {
          imageUrl,
          userId: this.userInfo.id,
          sessionId: this.sessionId
        }
      });
      
      const aiMessage: Message = {
        id: 'ai_' + Date.now(),
        role: 'assistant',
        content: response.data.analysis,
        mediaType: 'text',
        confidence: response.data.confidence,
        createdAt: new Date()
      };
      
      this.messageList.push(aiMessage);
      
    } catch (error: unknown) {
      console.error('图片分析失败:', error);
      const errorContent = error instanceof Error && error.message ? 
        `图片分析失败：${error.message}` : '图片分析失败，请稍后再试。';
      const errorMessage: Message = {
        id: 'error_' + Date.now(),
        role: 'assistant',
        content: errorContent,
        mediaType: 'text',
        createdAt: new Date()
      };
      this.messageList.push(errorMessage);
    } finally {
      this.aiTyping = false;
      this.scrollToBottom();
    }
  }
  
  /**
   * 开始录音
   */
  startRecord() {
    // #ifdef MP-WEIXIN || MP-TOUTIAO
    if (this.isRecording) {
      this.stopRecord();
    } else {
      this.isRecording = true;
      uni.startRecord({
        success: (res) => {
          this.isRecording = false;
          this.uploadAndSendAudio(res.tempFilePath);
        },
        fail: (error) => {
          this.isRecording = false;
          console.error('录音失败:', error);
          uni.showToast({
            title: '录音失败',
            icon: 'none'
          });
        }
      });
    }
    // #endif
    
    // #ifdef APP-PLUS || H5
    uni.showToast({
      title: '该平台暂不支持录音功能',
      icon: 'none'
    });
    // #endif
  }
  
  /**
   * 停止录音
   */
  stopRecord() {
    // #ifdef MP-WEIXIN || MP-TOUTIAO
    uni.stopRecord();
    this.isRecording = false;
    // #endif
  }
  
  /**
   * 上传并发送音频
   */
  async uploadAndSendAudio(filePath: string) {
    // 实现音频上传和语音识别逻辑
    console.log('上传音频:', filePath);
  }
  
  /**
   * 预览图片
   */
  previewImage(url: string) {
    uni.previewImage({
      urls: [url],
      current: url
    });
  }
  
  /**
   * 播放音频
   */
  playAudio(url: string) {
    // 实现音频播放逻辑
    console.log('播放音频:', url);
  }
  
  /**
   * 查看相关内容
   */
  viewRelatedContent(item: any) {
    uni.navigateTo({
      url: `/pages/webview/webview?url=${encodeURIComponent(item.url)}&title=${encodeURIComponent(item.title)}`
    });
  }
  
  /**
   * 加载更多消息
   */
  loadMoreMessages() {
    // 实现加载历史消息逻辑
    console.log('加载更多消息');
  }
  
  /**
   * 滚动到底部
   */
  scrollToBottom() {
    this.$nextTick(() => {
      this.scrollTop = 999999;
    });
  }
  
  /**
   * 获取当前平台
   */
  getPlatform(): string {
    // #ifdef MP-WEIXIN
    return 'mp-weixin';
    // #endif
    // #ifdef MP-TOUTIAO
    return 'mp-toutiao';
    // #endif
    // #ifdef MP-XHS
    return 'mp-xhs';
    // #endif
    // #ifdef APP-PLUS
    return 'app-plus';
    // #endif
    // #ifdef H5
    return 'h5';
    // #endif
    return 'unknown';
  }
  
  /**
   * 格式化时间
   */
  formatTime(date: Date): string {
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    
    if (diff < 60000) { // 1分钟内
      return '刚刚';
    } else if (diff < 3600000) { // 1小时内
      return Math.floor(diff / 60000) + '分钟前';
    } else if (diff < 86400000) { // 24小时内
      return Math.floor(diff / 3600000) + '小时前';
    } else {
      return date.toLocaleDateString();
    }
  }
  
  /**
   * 输入事件
   */
  onInput() {
    // 可以添加输入实时处理逻辑
  }
  
  /**
   * 输入框获得焦点
   */
  onInputFocus() {
    this.showSuggestions = false;
    this.scrollToBottom();
  }
  
  /**
   * 输入框失去焦点
   */
  onInputBlur() {
    if (!this.inputText.trim()) {
      this.showSuggestions = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%);
}

.message-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  margin: 20rpx;
  backdrop-filter: blur(10rpx);
  
  .loading-text {
    margin-left: 15rpx;
    font-size: 26rpx;
    color: #666;
    font-weight: 500;
  }
}

.message-item {
  margin-bottom: 40rpx;
  animation: messageSlideIn 0.3s ease-out;
  
  &.user-message {
    .user-msg {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      
      .message-content {
        max-width: 75%;
        margin-right: 15rpx;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          right: -8rpx;
          bottom: 10rpx;
          width: 0;
          height: 0;
          border-left: 16rpx solid #007aff;
          border-top: 8rpx solid transparent;
          border-bottom: 8rpx solid transparent;
        }
      }
      
      .user-avatar {
        flex-shrink: 0;
        border: 3rpx solid #007aff;
        border-radius: 50%;
      }
    }
  }
  
  &.ai-message {
    .ai-msg {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      
      .ai-avatar {
        flex-shrink: 0;
        margin-right: 15rpx;
        border: 3rpx solid #4CAF50;
        border-radius: 50%;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -2rpx;
          right: -2rpx;
          width: 16rpx;
          height: 16rpx;
          background: #4CAF50;
          border-radius: 50%;
          border: 2rpx solid white;
        }
      }
      
      .message-content {
        max-width: 75%;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          left: -8rpx;
          bottom: 10rpx;
          width: 0;
          height: 0;
          border-right: 16rpx solid white;
          border-top: 8rpx solid transparent;
          border-bottom: 8rpx solid transparent;
        }
      }
    }
  }
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-content {
  padding: 24rpx 28rpx;
  border-radius: 24rpx;
  position: relative;
  word-wrap: break-word;
  line-height: 1.6;
  font-size: 28rpx;
  
  &.user-content {
    background: linear-gradient(135deg, #007aff 0%, #0056d3 100%);
    color: white;
    border-bottom-right-radius: 8rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
    
    &::after {
      content: '';
      position: absolute;
      right: -10rpx;
      top: 20rpx;
      width: 0;
      height: 0;
      border-left: 10rpx solid #007aff;
      border-top: 10rpx solid transparent;
      border-bottom: 10rpx solid transparent;
    }
  }
  
  &.ai-content {
    background: white;
    color: #333;
    border-bottom-left-radius: 8rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid rgba(0, 0, 0, 0.05);
    
    &::before {
      content: '';
      position: absolute;
      left: -10rpx;
      top: 20rpx;
      width: 0;
      height: 0;
      border-right: 10rpx solid white;
      border-top: 10rpx solid transparent;
      border-bottom: 10rpx solid transparent;
    }
  }
}

.message-text {
  font-size: 32rpx;
  line-height: 1.5;
  word-wrap: break-word;
}

.message-image {
  max-width: 400rpx;
  max-height: 400rpx;
  border-radius: 10rpx;
}

.audio-message {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  
  .audio-duration {
    margin-left: 10rpx;
    font-size: 28rpx;
  }
}

.confidence-bar {
  margin-top: 15rpx;
  
  .confidence-text {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
}

.related-content {
  margin-top: 20rpx;
  
  .related-title {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
  
  .related-item {
    padding: 10rpx 15rpx;
    background-color: #f0f0f0;
    border-radius: 8rpx;
    margin-bottom: 8rpx;
    
    .related-text {
      font-size: 28rpx;
      color: #007aff;
    }
  }
}

.user-avatar,
.ai-avatar {
  flex-shrink: 0;
}

.message-time {
  text-align: center;
  margin-top: 10rpx;
  
  .time-text {
    font-size: 24rpx;
    color: #999;
  }
}

.ai-typing {
  display: flex;
  align-items: flex-end;
  margin-bottom: 40rpx;
  animation: typingPulse 1.5s ease-in-out infinite;
  
  .ai-avatar {
    margin-right: 15rpx;
    border: 3rpx solid #4CAF50;
    border-radius: 50%;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -2rpx;
      right: -2rpx;
      width: 16rpx;
      height: 16rpx;
      background: #4CAF50;
      border-radius: 50%;
      border: 2rpx solid white;
      animation: pulse 2s infinite;
    }
  }
  
  .typing-content {
    display: flex;
    align-items: center;
    padding: 24rpx 28rpx;
    background: white;
    border-radius: 24rpx;
    border-bottom-left-radius: 8rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid rgba(0, 0, 0, 0.05);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      left: -8rpx;
      bottom: 10rpx;
      width: 0;
      height: 0;
      border-right: 16rpx solid white;
      border-top: 8rpx solid transparent;
      border-bottom: 8rpx solid transparent;
    }
    
    .typing-text {
      margin-left: 15rpx;
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
    }
  }
}

@keyframes typingPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10rpx rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

.suggestions {
  padding: 25rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  
  .suggestion-scroll {
    white-space: nowrap;
  }
  
  .suggestion-list {
    display: flex;
    gap: 15rpx;
    
    .suggestion-item {
      flex-shrink: 0;
      padding: 16rpx 24rpx;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      border-radius: 25rpx;
      transition: all 0.3s ease;
      box-shadow: 0 2rpx 10rpx rgba(240, 147, 251, 0.3);
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 1rpx 5rpx rgba(240, 147, 251, 0.5);
      }
      
      .suggestion-text {
        font-size: 26rpx;
        color: white;
        font-weight: 500;
      }
    }
  }
}

.input-area {
  display: flex;
  align-items: flex-end;
  padding: 25rpx;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .media-buttons {
    display: flex;
    align-items: center;
    gap: 15rpx;
    margin-right: 20rpx;
    
    .media-btn {
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 122, 255, 0.1);
      border-radius: 25rpx;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        background: rgba(0, 122, 255, 0.2);
      }
      
      &.recording {
        background: rgba(255, 71, 87, 0.2);
        animation: recordingPulse 1s ease-in-out infinite;
        
        &:active {
          background: rgba(255, 71, 87, 0.3);
        }
      }
    }
  }
  
  .input-wrapper {
    flex: 1;
    margin-right: 20rpx;
    
    .text-input {
      width: 100%;
      min-height: 50rpx;
      max-height: 200rpx;
      padding: 20rpx 25rpx;
      background: #f8f9ff;
      border-radius: 25rpx;
      border: 2rpx solid transparent;
      font-size: 28rpx;
      line-height: 1.5;
      resize: none;
      transition: all 0.3s ease;
      
      &:focus {
        border-color: #007aff;
        background: white;
        box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
      }
      
      &::placeholder {
        color: #999;
      }
    }
  }
  
  .send-btn {
    width: 100rpx;
    height: 50rpx;
    border-radius: 25rpx;
    background: linear-gradient(135deg, #007aff 0%, #0056d3 100%);
    border: none;
    font-weight: 600;
    font-size: 26rpx;
    transition: all 0.3s ease;
    
    &:not([disabled]):active {
      transform: scale(0.95);
    }
    
    &[disabled] {
      background: #e0e0e0;
      color: #999;
    }
  }
}

@keyframes recordingPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>